/*
@author: user
@date: 2022/6/6 18:26
@Version: 1.0
@last modifined by : 2022/6/6 18:26
@last Modifined time : 2022/6/6 18:26
*/

import React, { useState } from 'react';
import { connect } from 'react-redux';
import STabs from '@C/business/STabs';
import { EnterAnimation } from '@C/TransitionAnimation';
import logo from '@P/images/logo.png';
import MobileNumberLogin from '@V/login/component/MobileNumberLogin';
import PasswordLogin from '@V/login/component/PasswordLogin';
import CopyrightStatement from '@C/CopyrightStatement';
import './index.less';

const Login = (props) => {
  const { dispatch } = props;
  const [isLogin, setIsLogin] = useState(false);

  const initialPanes = [
    { id: '0', title: '账户密码登录', closable: true,
      component: () => <MobileNumberLogin dispatch={dispatch} setIsLogin={setIsLogin}/>,
    },
    { id: '1', title: '手机号登录', closable: true,
      component: () => <PasswordLogin dispatch={dispatch} setIsLogin={setIsLogin}/>,
    },
  ];

  return (
    <div className="login-layout">
      <div className="login-layout-warp">
        <div className="login-layout-warp-title">
          <img src={logo} alt="加载失败..."/>
          <h1>Sass-Admin</h1>
          <p>这是一段很长很长很长很长很长很长很长很长很长的描述...</p>
        </div>
        <STabs
          width="20%"
          size="small"
          paneList={initialPanes}
        />
      </div>

      <CopyrightStatement isForceCenter />
      { isLogin && <EnterAnimation/> }
    </div>
  );
};

export default connect(() => {
  return {
    // value: state.counter.value,
  };
})(Login);
